<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS实现背景网格线(background-image)</title>
</head>

<body>
    <!-- 
    参数
        利用伪元素after来实现网格线图层
        background-image：设置线性渐变linear-gradient
        第一个是实现横向的网格线，第二个是实现纵向网格线
        参数一表示渐变线相较于水平线的角度，0deg表示渐变从下往上，90表示从左往右
        接下来的四个参数表示在距离起始点多少px位置的中心线的颜色
        0px或者可以设置0%的位置到1px或者设置其他百分比的位置都是黑色，接着从1px到终点都是透明色，这样可以画出一条1px的线
        background-size设置每一个网格的大小，默认重复平铺
        z-index：设置图层的层级，设置-1，让页面其他元素在他的上面
        ————————————————
        版权声明：本文为CSDN博主「蒲公英想养花」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
        原文链接：https://blog.csdn.net/qq_37604640/article/details/125898729
     -->
    <style>
        body::after {
            position: fixed;
            top: 0;
            left: 0;
            content: '';
            width: 100%;
            height: 100%;
            background-image: linear-gradient(0deg,
                    black 0px,
                    black 1px,
                    transparent 1px,
                    transparent 100px),
                linear-gradient(90deg,
                    black 0px,
                    black 1px,
                    transparent 1px,
                    transparent 100px);
            background-size: 50px 50px;
            opacity: 0.1;
            z-index: -1;
        }
        /* html,
        body {
            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        body {
            background-image: linear-gradient(to bottom,
                    black 0px,
                    black 1px,
                    transparent 1px,
                    transparent 100px);

        } */
    </style>
</body>

</html>